<template>
	<view class="comment-content">
		<view class="cus-search-component" v-if="showSearch">
			<input confirm-type="search" focus v-model="dataParams.search_key" @blur="search()" placeholder="找人" />
			<button type="primary" @click="search()">搜索</button>
		</view>
		<cus-no-data v-if="noData"></cus-no-data>
		<scroll-view scroll-y class="person-list" @scrolltolower="getFilesInfo">
			<!-- <uni-list>
				<uni-list-item v-for="info in infos" :key="info" :title="info.title" :thumb="info.title_image" @click="downloadInfoFile(info.id)"></uni-list-item>
			</uni-list> -->
			<view v-for="info in infos" :key="info">
				<view class="doc-item" v-if="info.doc_url == ''" @click="downloadInfoFile(info.id)">
					<image :src="info.title_image"></image>
					<view>{{ info.title }}</view>
				</view>
				<view v-else class="doc-item">
					<image :src="info.title_image"></image>
					<view>{{ info.title }}</view>
					<button type="primary" class="link-btn" @click="downloaFile(info.doc_url, info.id)">下载</button>
				</view>
				<!-- <text class="def-icon">&#xe600;</text> -->
			</view>
			<!-- <button @click="downloaFile()">下载</button> -->
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			infos: [],
			showSearch: false,
			dataParams: {
				search_key: '',
				type: 'construction',
				page_no: 1,
				page_size: 10,
				hard_id: ''
			},
			loadMore: true,
			noData: false
		};
	},
	onLoad(param) {
		this.dataParams.hard_id = param.id;
		if (param.type) {
			this.dataParams.type = param.type;
		}
		if (param.type === 'handbook') {
			uni.setNavigationBarTitle({
				title: '应用手册'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '施工规范'
			});
		}
		this.getFilesInfo();

		uni.getStorage({
			key: 'storage_key',
			success: function(res) {
				console.log(res.data);
			}
		});
	},
	onNavigationBarButtonTap() {
		this.showSearch = !this.showSearch;
	},
	methods: {
		downloaFile(link, id) {
			// 文件下载 服务器返回 头部包括相应的 Content-type,例 .doc 需 Content-type: application/msword

			uni.getStorage({
				key: 'storage_key' + id,
				success: (res) => {
					var listat = [];
					listat.push(res.data);
					console.log(listat);
					listat.filter(item => {
						if (item.id == id) {
							console.log('id重复');
							uni.openDocument({
								filePath: item.filePath,
								success: function(res) {
									console.log('打开文档成功');
								},
								fail:() => {
									this.download(link, id);
									console.log("微信开发工具，无法打开文档，进入fail")
								}
							});
						} else {
							this.download(link, id)
						}
					});
				},
				fail:() => {
						this.download(link, id)
				}
			});
		},
		download(link, id) {
			uni.showLoading({
				title: '正在下载...'
			});
			uni.downloadFile({
				url: link,
				success: function(res) {
					const filePath = res.tempFilePath;
					console.log(filePath);
					uni.openDocument({
						filePath: filePath,
						success: function(res) {
							console.log('打开文档成功');
						}
					});

					uni.setStorage({
						key: 'storage_key' + id,
						data: { id, filePath },
						success: function() {
							console.log('success');
						}
					});
				},
				fail: function(res) {
					uni.showToast({
						title: '下载失败',
						icon: 'none',
						duration: 3000
					});
				},
				complete: function() {
					uni.hideLoading();
				}
			});
		},
		getFilesInfo() {
			if (!this.loadMore) return;
			uni.showLoading({
				title: '',
				mask: false
			});
			this.$request({
				url: this.$store.state.baseUrl + '/lwj/get_document_list',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: this.dataParams,
				success: res => {
					if (res.data.data.list.length < this.dataParams.page_size) {
						this.loadMore = false;
					}
					this.dataParams.page_no++;
					this.infos.push(...res.data.data.list);
					if (this.infos.length === 0) {
						this.noData = true;
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		search() {
			this.dataParams.page_no = 1;
			uni.showLoading({
				title: '',
				mask: true
			});
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/app_hard_address_list',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: this.dataParams,
				success: res => {
					if (res.data.data.info.length < this.dataParams.page_size) {
						this.loadMore = false;
					}
					this.infos = res.data.data.info;
				},
				fail: () => {},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		downloadInfoFile(id) {
			if (this.dataParams.hard_id) {
				uni.navigateTo({
					url: '../mainChildPage/docInfo?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			} else {
				uni.navigateTo({
					url: './docInfo?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
};
</script>

<style>
.comment-content {
	background-color: #ffffff;
	height: 100%;
	width: 100%;
}
.link-btn {
	height: 60upx;
	line-height: 60upx;
	font-size: 26upx;
}
.comment-content-item {
	background-color: #ffffff;
}

.comment-content-item-last {
	padding-bottom: 60upx;
}

.person-list {
	height: 100%;
}

.cus-image-text-col {
	padding: 40upx 40upx 0;
}

.person-task {
	font-size: 24upx;
}

#person-phone {
	display: flex;
	flex-direction: row;
	flex: 0;
}

#person-phone text:nth-child(2) {
	color: #008ff3;
	font-size: 30upx;
}

.doc-item {
	display: flex;
	padding: 40upx 20upx 20upx;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.doc-item view {
	flex: 1;
	margin: 20upx;
	font-weight: bold;
}

.doc-item image {
	background-color: #eeeeee;
	width: 200upx;
	height: 200upx;
}

.doc-item text {
	font-size: 30upx;
}
</style>
